<template>
  <div>
    <input type="file" @change="test">
    <el-form ref="form" :model="form" label-width="80px">
      <el-upload
        class="upload-demo"
        :action="baseUrl + '/product/after/upload'"
        ref="upload"
        :auto-upload="false"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList2"
        :with-credentials="true"
        :limit="1"
        list-type="picture"
      >
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
      <el-form-item>
        <el-button type="primary" @click="submitUpload">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Test",
  data() {
    return {
      fileList2: [],
      param: "",
      form: {
        name: ""
      }
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(1, file);
    },
    beforeupload(file) {
      console.log(2, file);
      return false;
    },
    submitUpload() {
      console.log(this.$refs.upload);
      let file = this.$refs.upload.uploadFiles[0].raw;
      this.param = new FormData();
      this.param.append("file", file, file.name);
      this.param.append("name", "hello");
      this.param.append("price", "100");
      this.axios
        .post("/product/after/upload", this.param, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(res => {
          console.log(res.data);
        });
    },
    test(e) {
      console.log(e.target.files[0]);
    }
  }
};
</script>

<style scoped>
</style>